<template>
	<view class="container">
		<view class="header">
			<view class="left">
				<image class="img" src="../../static/car-make-default.png"></image>
			</view>
			<view class="right">
				<view class="title">{{username}}</view>
				<view class="text" v-if="mobile">{{mobile}}</view>
			</view>
		</view>
		
		<view class="edit-container" @click="goToEditPassword">
			<view class="left">更改密码</view>
			<view class="right">
				<view class="icon iconfont iconenter"></view>
			</view>
		</view>
		<view class="edit-container" @click="goToEditMobile">
			<view class="left">设置电话</view>
			<view class="right">
				<view class="icon iconfont iconenter"></view>
			</view>
		</view>
		
		
		<view class="button-container">
			<button class="button" @click="loginOut">退出登录</button>
		</view>
		
		
	</view>
</template>

<script>
	import { cacheSet, cacheGet} from '@/utils/cache.js';
	export default {
		data() {
			return {
				username:'',
				mobile:''
			}
		},
		onLoad(){
			this.username=cacheGet('userName')?cacheGet('userName'):'暂无';
			this.mobile=cacheGet('mobile')?cacheGet('mobile'):null;
		},
		methods: {
			//更改密码
			goToEditPassword(){
				uni.navigateTo({
					url:'/pages/ucenter/editPassword'
				})
			},
            //更改电话
            goToEditMobile(){
               uni.navigateTo({
               	url:'/pages/ucenter/editMobile'
               }) 
            },
			//退出登录
			loginOut(){
				let self=this;
				self.$store.dispatch('user/loginOut').then(function() {
					uni.showToast({
						title:'退出登录成功',
						duration:1500
					})
					setTimeout(function(){
						uni.reLaunch({
						    url: '/pages/ucenter/login'
						});
					},1500);
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
    .header{
		box-sizing: border-box;
		width: 100%;
		padding: 30upx;
		display: flex;
		align-items: center;
		border-bottom: 5px solid #f1f1f1;
	}
	.header .left{
		flex: 2.5;
		display: flex;
		align-items: center;
	}
	.header .left .img{
		display: block;
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
	}
	.header .right{
		flex:7.5;
		padding-left: 4upx;
	}
	.header .right .title{
		font-size: 32upx;
		color: #333;
		margin-bottom: 14upx;
	}
	.header .right .text{
		font-size: 28upx;
		color: #999;
	}
	.edit-container{
		box-sizing: border-box;
		width: 100%;
		height: 80upx;
        line-height: 80upx;
		display: flex;
		align-items: center;
		padding: 0 30upx;
		border-bottom: 1px solid #f1f1f1;
	}
	.edit-container .left{
		flex: 2;
		font-size: 32upx;
		color: #666;
	}
	.edit-container .right{
		flex: 8;
		text-align: right;
	}
	.edit-container .right .icon{
		font-size: 32upx;
		color: #999;
	}
	.button-container{
		box-sizing: border-box;
		width: 100%;
		padding: 100upx 30upx 30upx 30upx;
	}
	.button-container .button{
		box-sizing: border-box;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		background-color:#3c67c2;
		font-size: 32upx;
		text-align: center;
		color: #fff;
	}
</style>
